<template>
  <scroll-view
    class="goods_box"
    scroll-y
    @scrolltolower="onScrolltolower"
    :style="{
      height: `calc(100vh - ${props.height}rpx)`,
    }"
  >
    <view class="item">
      <view
        @click="toDetail(i_item.goodsId)"
        v-for="(i_item, i_index) in dataList"
        :key="i_index"
      >
        <card-layout :data="i_item" />
      </view>
    </view>

    <!-- 加载状态 -->
    <load :status="loadStatue"  :isImage="dataList.length<1" />
  </scroll-view>
</template>

<!-- 商品列表组件 -->
<script lang="ts" setup>
import cardLayout from '@/components/layout/card_layout/card-layout.vue'
import { ReqSelectPageGoods } from '@/api/goods'
import type { PageGoods, QueryPageByGoods } from '@/config/data/data'
import { onMounted, ref, watch } from 'vue'

//自定义事件
const emit = defineEmits<{
  /**
   *  切换页面内容事件
   * @param index: 下标
   */
  (e: 'onChange', index: number): void
  /**
   *  刷新结束事件
   */
  (e: 'onRefreshEnd'): void
}>()

//接受父组件参数
const props = defineProps({
  /**
   * 除本元素外，其他元素的总高度,单位rpx
   */
  height: {
    type: Number,
    default: 0,
  },
  /**
   * 是否刷新
   */
  isRefresh: {
    type: Boolean,
    default: false,
  },
  /**
   * 商品所属分类
   */
  category: {
    type: Number,
    default: 0,
  },
})

//商品数据列表
const dataList = ref<PageGoods[]>([])

//监听刷新状态
watch(
  () => props.isRefresh,
  (newValue, oldValue) => {
    if (newValue) {
      pageQuery.value.page = 0
      nextData(true).finally(() => {
        emit('onRefreshEnd')
      })
    }
  }
)

//监听滚动底部事件
const onScrolltolower = (e: any) => {
  nextData()
}

//加载状态
const loadStatue = ref(1)

//请求是否结束,防重复请求
const isReq = ref(true)

//查询分页参数
const pageQuery = ref<QueryPageByGoods>({
  page: 0,
  size: 5,
  id: props.category,
})

/**
 * 下一页数据
 * @param refresh 是否刷新
 */
const nextData = (refresh: boolean = false) => {
  return new Promise((reslove) => {
    //上个请求并未结束,或者 已经没有更多 同时不是刷新状态下
    if ((!isReq.value || loadStatue.value == -1) && !refresh) {
      reslove(true)
      return
    }
    isReq.value = false
    pageQuery.value.page += 1
    loadStatue.value = 0
    ReqSelectPageGoods(pageQuery.value)
      .then((res) => {
        if (res.code == 200 && res.data) {
          refresh ? (dataList.value = []) : ''
          let bool = res.data.length == pageQuery.value.size
          loadStatue.value = bool ? 1 : -1
          dataList.value.push(...res.data)
        }
      })
      .catch((err) => {
        loadStatue.value = -2
        setTimeout(() => {
          loadStatue.value = -1
        }, 100)
      })
      .finally(() => {
        isReq.value = true
        reslove(true)
      })
  })
}

/**
 * 跳转详情
 * @param id: 商品id
 */
const toDetail = (id: number | string) => {
  uni.navigateTo({ url: `../../subpkg/goods/detail?id=${id}` })
}

//页面加载
onMounted(() => {
  nextData()
})
</script>

<style scoped lang="scss">
.goods_box {
  display: inline-flex;
  width: calc(100% - 40rpx);
  padding: 0 20rpx 20rpx;
  background-color: $uni-bg-color;

  ::-webkit-scrollbar {
    width: 0 !important;
    background: transparent !important;
  }

  .item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30rpx;
    row-gap: 30rpx;
    white-space: normal;
  }
}
</style>
